---
slug: /plugins/alignment
title: Alignment
---

### `createAlignPlugin`

An align element aligns its children:
- default `type` are:
  - `'align_left'`
  - `'align_center'`
  - `'align_right'`
  - `'align_justify'`
- wrap node strategy

```ts live
() => {
  const ToolbarButtonsAlign = () => {
    const editor = useStoreEditorRef(useEventEditorId('focus'));

    return (
      <>
        <ToolbarAlign icon={<FormatAlignLeft />} />
        <ToolbarAlign
          type={getPlatePluginType(editor, ELEMENT_ALIGN_CENTER)}
          icon={<FormatAlignCenter />}
        />
        <ToolbarAlign
          type={getPlatePluginType(editor, ELEMENT_ALIGN_RIGHT)}
          icon={<FormatAlignRight />}
        />
        <ToolbarAlign
          type={getPlatePluginType(editor, ELEMENT_ALIGN_JUSTIFY)}
          icon={<FormatAlignJustify />}
        />
      </>
    );
  };

  const plugins = [
    ...pluginsBasic,
    createAlignPlugin()
  ];

  return (
    <>
      <HeadingToolbar>
        <ToolbarButtonsAlign />
      </HeadingToolbar>
      <Plate
        id="alignment"
        plugins={plugins}
        components={components}
        options={options}
        editableProps={editableProps}
        initialValue={initialValueBasicElements}
      />
    </>
  );
}
```